
<template>
    <div class="login-wrapper">
      <div class="login-container">
        <div class="tab-container">
          <router-link to="/login">
            <span class="tab">登录</span>
          </router-link>
          <span class="tab active">注册</span>
        </div>
        <form @submit.prevent="handleRegister">
          <div class="form-group">
            <input 
              type="text" 
              v-model="formData.username" 
              placeholder="用户名"
              @blur="validateUsername"
              required 
            />
            <span class="error-message" v-if="errors.username">{{ errors.username }}</span>
          </div>
          <div class="form-group">
            <input 
              type="password" 
              v-model="formData.password" 
              placeholder="密码"
              @blur="validatePassword"
              required 
            />
            <span class="error-message" v-if="errors.password">{{ errors.password }}</span>
          </div>
          <div class="form-group">
            <input 
              type="password" 
              v-model="formData.confirmPassword" 
              placeholder="确认密码"
              @blur="validateConfirmPassword"
              required 
            />
            <span class="error-message" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</span>
          </div>
          <div class="agreement">
            <label>
              <input type="checkbox" v-model="agreed">
              <span>已阅读并同意账号使用协议和隐私政策</span>
            </label>
          </div>
          <button type="submit" :disabled="!isFormValid">注册</button>
        </form>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { register } from '../api/api' 
  
  export default {
    setup() {
      const router = useRouter()
      
      const formData = reactive({
        username: '',
        password: '',
        confirmPassword: ''
      })
      
      const errors = reactive({
        username: '',
        password: '',
        confirmPassword: ''
      })
      
      const agreed = ref(false)
  
      const validateUsername = () => {
        if (formData.username.length < 3) {
          errors.username = '用户名不能少于3个字符'
        } else {
          errors.username = ''
        }
      }
  
      const validatePassword = () => {
        if (formData.password.length < 5) {
          errors.password = '密码不能少于5个字符'
        } else {
          errors.password = ''
        }
      }
  
      const validateConfirmPassword = () => {
        if (formData.confirmPassword !== formData.password) {
          errors.confirmPassword = '两次输入的密码不一致'
        } else {
          errors.confirmPassword = ''
        }
      }
  
      const isFormValid = computed(() => {
        return formData.username.length >= 3 && 
               formData.password.length >= 5 && 
               formData.password === formData.confirmPassword &&
               agreed.value &&
               !errors.username &&
               !errors.password &&
               !errors.confirmPassword
      })
  
      const handleRegister = async () => {
        validateUsername()
        validatePassword()
        validateConfirmPassword()
        
        if (!agreed.value) {
          alert('请先同意用户协议')
          return
        }
  
        if (!isFormValid.value) {
          return
        }
  
        try {
          const response = await register({
            username: formData.username,
            password: formData.password
          })
            alert('注册成功')
            router.push('/login')
        } catch (error) {
          console.error('注册失败:', error)
          alert('注册失败，请稍后重试')
        }
      }
  
      return {
        formData,
        agreed,
        handleRegister,
        errors,
        validateUsername,
        validatePassword,
        validateConfirmPassword,
        isFormValid
      }
    }
  }
  </script>
  
  <style scoped>
  .login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #fff;
  }
  
  .login-container {
    width: 400px;
    padding: 20px;
  }
  
  .tab-container {
    margin-bottom: 24px;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .tab {
    display: inline-block;
    font-size: 24px;
    padding: 10px 0;
    margin-right: 20px;
    color: #666;
    cursor: pointer;
  }
  
  .tab.active {
    color: #ff6700;
    border-bottom: 2px solid #ff6700;
  }
  
  .form-group {
    margin-bottom: 14px;
  }
  
  input[type="text"],
  input[type="password"] {
    width: 100%;
    padding: 14px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 14px;
    background-color: #f9f9f9;
  }
  
  input[type="text"]:focus,
  input[type="password"]:focus {
    border-color: #ff6700;
    outline: none;
    background-color: #fff;
  }
  
  .agreement {
    margin: 10px 0 20px;
    font-size: 14px;
    color: #666;
  }
  
  .agreement input[type="checkbox"] {
    margin-right: 5px;
  }
  
  button {
    width: 100%;
    padding: 14px;
    background-color: #ff6700;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  button:hover {
    background-color: #f25807;
  }
  
  /* 右上角装饰 */
  
  .error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    display: block;
  }
  
  button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  button:disabled:hover {
    background-color: #ccc;
  }
  </style>